import React from "react";

export default function ChangeFavicon() {
    const [img, setImg] = React.useState("https://p6-passport.byteacctimg.com/img/user-avatar/c3733cd6bbf7b3a43e01a7fb4d1ee98f~100x100.awebp");
    const ChangeFavicon = () => {        
        let link = document.querySelector("link[rel*='icon']") || document.createElement("link");
        const newFaviconUrl = "https://sponsors.vuejs.org/images/goread_io.avif";
        // 更新favicon的href属性为新图标链接
        (link as HTMLAnchorElement).href = newFaviconUrl;
    };
    const ChangeTitle = () => {
        document.title = "修改后的网页标题";
    }
    const ChangeIMG = () => {
        setImg("https://sponsors.vuejs.org/images/crmeb.svg?v2");
    };
    return (
        <div>
            <button className="returnButton">
                <a href="/">点击返回主菜单</a>
            </button>
            <h1>修改网页图标icon和标题</h1>
            <div style={{ margin: "0 auto", width: "60%" }}>
                <button onClick={ChangeFavicon}>修改网页图标</button>
                <button onClick={ChangeTitle}>修改网页标题</button>
                <button onClick={ChangeIMG}>修改图片地址</button>
            </div>
            <div style={{ width: "100%", height: "300px", textAlign: "center", marginTop: "60px" }}>
                <img src={img} alt="" />
            </div>
        </div>
    );
}
